﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="share/layout">

<head>
    <title>知识图谱可视化</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        .pl-20 {
            padding-left: 20px
        }

        text {
            cursor: pointer;
            max-width: 25px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }

        circle {
            cursor: pointer;
        }

        #graphcontainerdiv {
            background: #fff;
        }

        .el-color-picker__panel {
            left: 812px !important;
        }

        .wange-toolbar {
            border: 1px solid #ccc;
        }

        .wangeditor-form {
            border: 1px solid #ccc;
            height: 350px;
            min-height: 340px
        }

        .mind-fj-box {
            display: inline-block;
            width: 290px;
            padding: 5px;
            border: 1px solid #e6e6e6;
            box-shadow: 0 0 8px rgba(206, 205, 201, .38);
        }

        .mind-fj-p {
            color: #666;
            line-height: 24px;
            padding: 5px;
            background: rgba(255, 255, 255, .85);
        }

        .mind-carousel + .mind-fj-p .el-scrollbar__wrap {
            height: auto;
            max-height: 220px;
            min-height: 0;
        }

        .carous-img {
            height: 100%;
            background: rgba(0, 0, 0, .10);
            line-height: 197px;
            text-align: center;
        }

        .carous-img img {
            max-width: 100%;
            max-height: 100%;
            line-height: 197px;
            vertical-align: middle;
        }

        .circle_opreate {
            display: none;
        }

        .node_detail {
            position: absolute;
            width: 100%;
            line-height: 35px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            font-size: 12px;
            padding-bottom: 10px;
            background: rgba(198, 226, 255, 0.2);
            display: none;
        }

        .node_pd {
            padding: 4px;
            font-size: 13px;
            font-family: -webkit-body;
            font-weight: 600;
        }

        .operatetips {
            position: absolute;
            right: 10px;
            float: right;
            top: 0;
            width: 220px;
            padding: 30px;
            border: 2px #EE7942 solid;
            border-radius: 4px;
        }

        .jsoncontainer {
            position: absolute;
            right: 30%;
            float: right;
            top: 0;
            width: 60%;
            height: 60%;
            padding: 30px;
            border: 2px #EE7942 solid;
            border-radius: 4px;
            background: #fff;
        }

        .cypher_toolbar {
            line-height: 70px;
            height: 85px;
            padding: 0 22px;
            border-bottom: 1px solid #ededed;
        }
    </style>
    <link th:href="@{/css/jquery.jsonview.min.css}" rel="stylesheet">
    <link th:href="@{/wangeditor/wangEditor.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery.jsonview.js}"></script>
</head>

<body>
<div layout:fragment="content">
    <div class="mind-box">
        <!-- 左侧 -->
        <el-scrollbar class="mind-l">
            <div class="ml-m">
                <h2 class="ml-ht">图谱列表</h2>
                <div class="ml-a-box" style="min-height:280px">
                    <el-button type="info" style="margin: 2px 0 4px 2px;" plain size="small" @click="createdomain">
                        新建图谱
                    </el-button>
                    <a @click="matchdomaingraph(m,$event)" v-for="m in pageModel.nodeList" href="javascript:void(0)">
                        <el-tag closable style="margin:2px" @close="deletedomain(m.id,m.name)">{{m.name}}</el-tag>
                    </a>
                    <el-button v-if="pageModel.pageIndex<pageModel.totalPage" type="info" style="margin: 2px 0 4px 2px;"
                               plain size="small" @click="getmoredomain">加载更多
                    </el-button>
                </div>
            </div>
        </el-scrollbar>
        <!-- 左侧over -->
        <!-- 右侧 -->
        <div class="mind-con">
            <!-- 头部 -->
            <div class="mind-top clearfix">
                <div class="fl">
                    <div class="search" v-show="domain!=''">
                        <el-button @click="getdomaingraph(0)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-search"></use>
                            </svg>
                        </el-button>
                        <el-input placeholder="请输入关键词" v-model="nodename"
                                  @keyup.enter.native="getdomaingraph"></el-input>
                    </div>
                    <span v-show="domain!=''">
	          <span class="dibmr">
				<span>显示节点个数：</span>
				<a v-for="(m,index) in pagesizelist" @click="setmatchsize(m,this)" :title="m.size"
                   href="javascript:void(0)" :class="[m.isactive ? 'sd-active' : '', 'sd']">{{m.size}}</a>
			  </span>
          </span>
                </div>
                <div class="fr">
                    <a href="javascript:void(0)" @click="cypherjson" class="svg-a-sm">
                        <i class="el-icon-tickets">显示json</i>
                    </a>
                    <!--                    <a href="javascript:void(0)" @click="showCypher" class="svg-a-sm">-->
                    <!--                        <i class="el-icon-caret-right">执行Cypher</i>-->
                    <!--                    </a>-->
                    <a href="javascript:void(0)" @click="updategraph" class="svg-a-sm">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shuaxin"></use>
                        </svg>
                        刷新
                    </a>
                    <a href="javascript:void(0)" @click="requestFullScreen" class="svg-a-sm">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-quanp"></use>
                        </svg>
                        全屏
                    </a>
                    <el-dropdown @command="operateCommand">
                        <el-button type="primary">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="image">导出图片</el-dropdown-item>
                            <el-dropdown-item command="import">导入</el-dropdown-item>
                            <el-dropdown-item command="export">导出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="cypher_toolbar clearfix" v-show="cyphertextshow">
                <!--                <div style="width: 80%;float: left">-->
                <!--                    <el-input type="textarea" :rows="2" placeholder="请输入Cypher" v-model="cyphertext"></el-input>-->
                <!--                </div>-->
                <!--                <div style="padding: 7px;">-->
                <!--                    <el-button type="success" @click="cypherrun" style="margin-left: 15px;" icon="el-icon-caret-right"-->
                <!--                               plain>执行-->
                <!--                    </el-button>-->
                <!--                </div>-->
            </div>
            <!-- 头部over -->
            <!-- 中部 -->
            <el-scrollbar class="mind-cen" id="graphcontainerdiv">
                <div id="nodedetail" class="node_detail">
                    <h5>详细数据</h5>
                    <span class="node_pd" v-for="(m,k) in nodedetail">{{k}}:{{m}}</span>
                </div>

                <div v-show="tipsshow" id="operatetips" class="operatetips">
                    <span style="color:red;position:absolute;top:6px;left:10px;cursor:pointer;"
                          @click="btntipsclose">x</span>
                    <h3>tips</h3>
                    <ul>
                        <li>1.选中节点或者节点名称，双击修改名称</li>
                        <li>2.连线选择之后，再点击其他节点，完成节点间的连线</li>
                        <li>3.鼠标滑到连线上，连线变粗，双击修改连线名称，若已有名称，则可根据提示修改</li>
                        <li>4.批量添加，没有添加节点文字控制（如有需要可自己定制）</li>
                        <li>5.追加意为在该节点下添加下级节点，并添加默认连线</li>
                        <li>6.展开意为查询与该节点有直接关系的节点，（如有需要可定制自己的cypher语句）</li>
                        <li>7.导入csv,需保证csv编码为utf-8,代码中使用远程导入，可使用服务器importdata(可查看相关博文)</li>
                        <li>8.为节点添加富文本或者图片后，在节点上停留2秒可以查看内容</li>
                    </ul>
                </div>
                <el-scrollbar v-show="jsonshow" id="jsoncontainer" class="jsoncontainer">
                    <pre id="json-renderer"></pre>
                </el-scrollbar>
                <div id="graphcontainer" class="graphcontainer"></div>
            </el-scrollbar>
            <!-- 中部over -->
            <div class="svg-set-box"></div>
            <!-- 底部 -->
            <el-dialog title="csv导入图谱" :visible.sync="dialogFormVisible" width="30%">
                <el-form>
                    <div><span>注意字符集为utf-8无bom格式，三元组结构：节点-节点-关系</span></div>
                    <el-form-item label="图谱领域" label-width="120px">
                        <el-autocomplete style="width:100%" v-model="uploadparam.domain"
                                         placeholder="请输入内容">
                            <!---->
                            <!--:fetch-suggestions="querySearch"-->
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="选择文件" label-width="120px">
                        <el-upload
                                class=""
                                :headers="headers"
                                ref="upload"
                                :action="uploadurl"
                                accept=".csv,.xls,.xlsx"
                                :show-file-list="true"
                                :data="uploadparam"
                                :on-success="csvsuccess"
                                :auto-upload="false">
                            <el-button slot="trigger" class="btn-bo" style="padding: 12px 24px;margin-bottom: 0px;">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-daoru"></use>
                                </svg>
                                选择文件
                            </el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpload">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="导出图谱csv" :visible.sync="exportFormVisible" width="30%">
                <el-form>
                    <el-form-item label="图谱领域" label-width="120px">
                        <el-autocomplete style="width:100%"
                                         v-model="uploadparam.domain" placeholder="请输入内容">
                            <!--:fetch-suggestions="querySearch"-->
                        </el-autocomplete>
                    </el-form-item>
                    <el-button type="primary" @click="exportcsv">确 定</el-button>
                </el-form>
            </el-dialog>
            <el-dialog id="editform" title="属性编辑" :visible.sync="isedit" width="30%">
                <el-tabs type="card" tab-position="top" v-model="propactiveName" @tab-click="prophandleClick"
                         style="margin: 10px">
                    <el-tab-pane label="属性编辑" name="propedit">
                        <el-form :model="graphEntity">
                            <el-form-item label="节点名称" label-width="120px">
                                <el-input v-model="graphEntity.name" style="width:324px"></el-input>
                            </el-form-item>
                            <el-form-item label="选择颜色" label-width="120px">
                                <el-color-picker id="colorpicker"
                                                 v-model="graphEntity.color" :predefine="predefineColors">
                                </el-color-picker>
                            </el-form-item>
                            <el-form-item label="节点半径" label-width="120px">
                                <el-slider v-model="graphEntity.r" style="width:324px"></el-slider>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="添加图片" name="propimage">
                        <el-form>
                            <el-form-item label="本地上传" label-width="120px">
                                <el-upload class="" :headers="headers"
                                           name="file"
                                           ref="upload"
                                           :action="uploadimageurl"
                                           accept=".jpg,.png"
                                           multiple
                                           :show-file-list="false"
                                           :data="uploadimageparam"
                                           :on-success="uploadsuccess"
                                           :auto-upload="true">
                                    <el-button slot="trigger" size="small" type="primary">选择</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="网络地址" label-width="120px">
                                <el-input v-model="netimageurl" style="width: 60%"></el-input>
                                <a href="javascript:void(0)" @click="addnetimage" class="cg">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-add-s"></use>
                                    </svg>
                                </a>
                            </el-form-item>
                            <el-form-item label="已选图片" label-width="120px">
                                <ul class="el-upload-list el-upload-list--picture-card">
                                    <li v-for="item in nodeimagelist" class="el-upload-list__item is-success">
                                        <img :src="imageurlformat(item)" alt="" class="el-upload-list__item-thumbnail">
                                        <label class="el-upload-list__item-status-label">
                                            <i class="el-icon-upload-success el-icon-check"></i>
                                        </label>
                                        <i class="el-icon-close" @click="imagehandleRemove(item)"></i>
                                        <span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview">
										     <i class="el-icon-zoom-in" @click="handlePictureCardPreview(item)"></i>
										</span>
				                        <span class="el-upload-list__item-delete">
				                            <i class="el-icon-delete" @click="imagehandleRemove(item)"></i>
				                        </span>
									</span>
                                    </li>
                                </ul>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="添加描述" name="richtextedit">
                        <div ref="eidtorToolbar" id="eidtorToolbar" class="wange-toolbar"></div>
                        <div ref="eidtorContent" id="eidtorContent" class="wangeditor-form"></div>
                    </el-tab-pane>
                </el-tabs>
                <div slot="footer" class="dialog-footer">
                    <el-button v-show="propactiveName=='propimage'" type="primary" @click="savenodeimage"
                               class="btn-line cur">保存
                    </el-button>
                    <el-button v-show="propactiveName=='richtextedit'" @click="savenodecontent" type="primary"
                               class="btn-line cur">保存
                    </el-button>
                    <el-button v-show="propactiveName=='propedit'&&graphEntity.uuid!=0" type="primary"
                               @click="createnode">更新
                    </el-button>
                    <el-button v-show="propactiveName=='propedit'&&graphEntity.uuid==0" type="primary"
                               @click="createnode">创建
                    </el-button>
                    <el-button @click="resetsubmit">取消</el-button>
                </div>
            </el-dialog>
            <el-dialog id="batchcreateform" :title="operatenameformat(operatetype)" :visible.sync="isbatchcreate"
                       width="30%">
                <div v-show="operatetype==1" class="mb-l">添加同级</div>
                <div v-show="operatetype==2" class="mb-l">添加下级</div>
                <div v-show="operatetype==3" class="mb-l">批量添加</div>
                <div v-show="operatetype==4" class="mb-l">段落识别</div>
                <div class="mb-r">
                    <div v-show="operatetype!=2" class="mb-m">
                        <div class="mb-label">源节点名称</div>
                        <div class="mb-con">
                            <el-input v-model="batchcreate.sourcenodename"></el-input>
                            <span v-show="operatetype==3" class="mb-label">（只能添加一个）</span>
                            <span v-show="operatetype==1" class="mb-label">（多个以英文逗号隔开）</span>
                        </div>
                        <div class="mb-label" v-show="operatetype!==1">关系</div>
                        <div class="mb-con" v-show="operatetype!==1">
                            <el-input v-model="batchcreate.relation"></el-input>
                            <div class="mb-label">（只能添加一个）</div>
                        </div>
                    </div>
                    <div v-show="operatetype!=1" class="mb-m">
                        <div class="mb-label">子节点名称</div>
                        <div class="mb-con">
                            <el-input v-model="batchcreate.targetnodenames"></el-input>
                            <span class="mb-label " v-show="operatetype==3">（多个以英文逗号隔开,可不填）</span>
                            <span class="mb-label " v-show="operatetype==2">（多个以英文逗号隔开）</span>
                        </div>
                    </div>
                    <div class="mb-m tc">
                        <el-button v-show="operatetype==1" type="primary" @click="batchcreatesamenode">确定</el-button>
                        <el-button v-show="operatetype==2" type="primary" @click="batchcreatechildnode">确定</el-button>
                        <el-button v-show="operatetype==3" type="primary" @click="batchcreatenode">确定</el-button>
                        <el-button @click="resetsubmit">取消</el-button>
                    </div>
                </div>
            </el-dialog>
            <!-- 底部over -->
        </div>
        <!-- 右侧over -->
        <!-- 空白处右键 -->
        <ul class="el-dropdown-menu el-popper blankmenubar" id="blank_menubar" style="display: none;">
            <li class="el-dropdown-menu__item" @click="btnaddsingle">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiedian"></use>
                </svg>
                <span class="pl-15">添加节点</span>
            </li>
            <li class="el-dropdown-menu__item" @click="btnquickaddnode">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-add-rd"></use>
                </svg>
                <span class="pl-15">快速添加</span>
            </li>
        </ul>
        <!-- 连线按钮组 -->
        <ul class="el-dropdown-menu el-popper linkmenubar" id="link_menubar" style="display: none;">
            <li class="el-dropdown-menu__item" @click="updatelinkName">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-editor"></use>
                </svg>
                <span class="pl-15">编辑</span>
            </li>
            <li class="el-dropdown-menu__item" @click="deletelink">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shanchu"></use>
                </svg>
                <span class="pl-15">删除</span>
            </li>
        </ul>
        <!-- 富文本展示 -->
        <div id="richContainer" style="display: none;width: 400px">
            <div class="mind-fj-box" v-show="showImageList.length>0 ||editorcontent!=''">
                <div class="mind-carousel" v-show="showImageList.length>0">
                    <el-carousel height="197px" :interval="2000" arrow="always">
                        <el-carousel-item v-for="item in showImageList" :key="item.ID">
                            <div class="carous-img">
                                <img :src="item.FileName" alt="">
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <el-scrollbar v-show="editorcontent!=''" class="mind-fj-p">
                    <p v-html="editorcontent"></p>
                </el-scrollbar>
            </div>
        </div>

    </div>
</div>
</body>

<div layout:fragment="jscontent">
    <script th:src="@{/js/lodash.min.js}"></script>
    <script th:src="@{/js/d3.v4.min.js}"></script>
    <script th:src="@{/js/html2canvas.min.js}"></script>

    <script type="text/javascript" th:src="@{/wangeditor/wangEditor.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        var initdomain = function () {
            var domain = [[${domain}]];
            var domainid = [[${domainid}]];
            this.domain = domain;
            this.domainid = domainid;
        }
    </script>
    <script th:inline="javascript" type="text/javascript" th:src="@{/js/kgbuilder.js}"></script>
</div>
</html>